<template>
  <div class="video">
    <div class="pageheader">
      <XHeader
        :left-options="{backText:''}"
        class="XHeader"
      >
        <!--   <div class="search">
             <div class="search-con">
               <i></i>
               <div>输入您想搜索的商品</div>
             </div>
           </div>-->
        <div class="flex flex-center topbar">
          <div class="flex-full inputbox flex flex-center block" @click="onSearchTap">
            <img class="icon" src="@/assets/img/ic_search.png"/>
            <input style="text-align: left" class="input flex-full" disabled placeholder="搜索商品"/>
          </div>
          <div class="topbar-btn">搜索</div>
        </div>
      </XHeader>
    </div>

    <scroller
      @on-pullup-loading="getSpecialVideoList"
      lock-x
      ref="scroller"
      :pullup-config="{content:'',upContent:'',downContent:'释放加载更多',loadingContent:'加载中...',}"
      height="-45"
      :use-pullup="true"
      v-model="status"
    >
    <div class="page">
      <div class="video-content" v-if="specialVideoList.length">
        <video-item v-for="(item, index) in specialVideoList" :key="index" :id="item.id" :title="item.title" @click.native="onSpecial(item.id, true)">
          <video-playback height="200px" :imageUrl="item.image_url" :videoUrl="item.video_url"></video-playback>
          <video-goods @click.native.stop :goodsList="item.topic_goods_list"></video-goods>
        </video-item>
      </div>
    </div>
      <load-more
        v-if="!more&&!specialVideoList.length"
        :show-loading="false"
        :tip="'暂无数据'"
        background-color="#fbf9fe"
      ></load-more>
    </scroller>

  </div>
</template>

<script>
  import VideoItem from '../../../components/videoItem'
  import VideoPlayback from '../../../components/videoItem/videoPlayback'
  import VideoGoods from '../../../components/videoItem/videoGoods'
  import Mall from '@/dll/mall'

  export default {
    name: 'Video',
    components: {
      VideoItem,
      VideoPlayback,
      VideoGoods
    },
    data () {
      return {
        // 视频带货
        specialVideoList: [],
        status: {
          pullupStatus: 'default'
        },
        page: 1,
        more: true
      }
    },

    created () {
      this.getSpecialVideoList()
    },

    methods: {
      onSearchTap () {
        this.$router.push({ name: 'mallSearch' })
      },

      // 获取视频带货列表
      async getSpecialVideoList () {
        if (!this.more) {
          return
        }
        let page = this.page
        let param = {
          page: page
        }
        this.$vux.loading.show({
          text: '加载中'
        })
        let res = await Mall.getTopicVideoList(param)
        this.$vux.loading.hide()
        if (res.code == 0) {
          if (page >= res.data.page_total) {
            this.more = false
            this.$refs.scroller && this.$refs.scroller.disablePullup()
          }
          this.specialVideoList = [].concat(this.specialVideoList, res.data.topic_list)
          this.page = page + 1
          this.$forceUpdate()
          this.$refs.scroller && this.$refs.scroller.donePullup()
        } else {
          this.more = false
          this.$forceUpdate()
          this.$refs.scroller && this.$refs.scroller.disablePullup()
        }
      },

      // 专题活动跳转  isVideo: 标识视频带货
      onSpecial (topicId, isVideo) {
        this.$router.push({ name: 'mallChannel', params: { topicId }, query: { isVideo } })
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    box-sizing: border-box;
  }

  .video {
    /deep/ .vux-header-title {
      margin: 0 20px 0 44px;
    }

    .topbar {
      box-sizing: border-box;
      background-color: #fff;
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .topbar .icon {
      width: 20px;
      height: 20px;
      display: block;
      flex-shrink: 0;
    }

    .topbar .inputbox {
      background: #fbf8f7;
      height: 35px;
    }

    .topbar .input {
      font-size: 12px;
      color: #351009;
      text-align: center;
      line-height: 17px;
    }

    .topbar .topbar-btn {
      background: #2195F3;
      color: #fff;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
      padding: 0 23px;
      border-bottom-right-radius: 10px;
      border-top-right-radius: 10px;
    }

    .video-content {
      padding: 10px;
    }
  }
</style>
